<template>
  <div class="ai-chat-container">
      <div class="ai-chat-header">
        <h2>AI 智能问答</h2>
        <div class="header-actions">
          <el-button type="text" @click="clearHistory" size="small">清空历史</el-button>
        </div>
      </div>
      <div class="ai-chat-content" ref="chatContent">
        <div v-if="messages.length === 0" class="no-messages">
          <p>暂无消息，请输入您的问题开始对话</p>
        </div>
        <div v-for="(msg, index) in messages" :key="index" :class="['message-item', msg.type]">
          <div class="message-avatar">
            <span v-if="msg.type === 'user'">👤</span>
            <span v-else>🤖</span>
          </div>
          <div class="message-content">
            <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
            <div class="message-text">{{ msg.content }}</div>
          </div>
        </div>
        <div v-if="isLoading" class="message-item ai">
          <div class="message-avatar">🤖</div>
          <div class="message-content">
            <div class="loading-spinner">
              <i class="el-icon-loading"></i>
              <span>AI正在思考...</span>
            </div>
          </div>
        </div>
      </div>
    <div class="ai-chat-footer">
      <el-input
        v-model="inputMessage"
        placeholder="请输入您的问题..."
        type="textarea"
        :rows="3"
        @keyup.enter.ctrl="sendMessage"
        @keyup.enter="handleEnterKey"
        resize="none"
        :disabled="isLoading"
      />
      <div class="chat-actions">
        <div class="quick-questions">
          <span class="quick-question-label">快速提问:</span>
          <span v-for="q in quickQuestions" :key="q" class="quick-question-tag" @click="quickAsk(q)">{{ q }}</span>
        </div>
        <div class="action-buttons">
          <span class="tip">Ctrl + Enter 快速发送</span>
          <el-button type="primary" @click="sendMessage" :loading="isLoading" :disabled="!inputMessage.trim()">
            发送
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AIChat',
  data() {
      return {
        messages: [],
        inputMessage: '',
        isLoading: false,
        quickQuestions: ['你好', '你能做什么', '讲个笑话', '推荐一本书', '推荐电影', '现在几点', '今天星期几', '什么是人工智能', '什么是Vue', '1+1等于多少']
      }
    },
  created() {
    // 从本地存储加载历史对话
    this.loadHistory()
    
    // 如果没有历史记录，显示欢迎消息
    if (this.messages.length === 0) {
      this.messages.push({
        type: 'ai',
        content: '您好！我是AI助手，请问有什么可以帮助您的吗？',
        timestamp: Date.now()
      })
      this.saveHistory()
    }
  },
  methods: {
      // 处理Enter键事件
      handleEnterKey() {
        // 不使用Ctrl+Enter的情况下，提示用户使用Ctrl+Enter发送
        this.$message.info('按 Ctrl+Enter 发送消息')
      },
      
      // 发送消息的主要方法
      async sendMessage() {
        if (!this.inputMessage.trim() || this.isLoading) {
          return
        }

        // 添加用户消息
        const userMessage = {
          type: 'user',
          content: this.inputMessage.trim(),
          timestamp: Date.now()
        }
        this.messages.push(userMessage)
        this.inputMessage = ''
        this.saveHistory()
        this.scrollToBottom()

        // 模拟AI思考时间
        this.isLoading = true
        try {
          // 延迟一段时间模拟AI思考
          await this.delay(Math.random() * 1000 + 1000)
          
          // 生成AI回答
          const aiResponse = this.generateAIResponse(userMessage.content)
          
          // 添加AI回复消息
          const aiMessage = {
            type: 'ai',
            content: aiResponse,
            timestamp: Date.now()
          }
          this.messages.push(aiMessage)
          this.saveHistory()
        } finally {
          this.isLoading = false
          this.scrollToBottom()
        }
      },
      
      // 延迟函数
      delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms))
      },
      
      // 生成AI回答（纯前端逻辑）
      generateAIResponse(question) {
        // 转换为小写以便更好的匹配
        const lowerQuestion = question.toLowerCase().trim()
        
        // 检查是否是数学计算问题
        const calculationResult = this.calculateMathExpression(lowerQuestion)
        if (calculationResult) {
          return calculationResult
        }
        
        // 预设的问答对 - 增加更多常见问题
        const qaMap = {
          '你好': '您好！很高兴为您服务！请问有什么可以帮助您的吗？',
          '你是谁': '我是AI助手，一个基于前端技术构建的智能问答系统。',
          '你叫什么': '我是AI助手，很高兴认识您！',
          '你能做什么': '我可以回答您的问题、提供信息、聊天交流，还可以讲笑话、推荐书籍、进行简单的数学计算等。虽然我不能连接到互联网，但我会尽力基于我的知识库为您提供帮助。',
          '讲个笑话': '为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 = Dec 25！',
          '再讲个笑话': '程序员A问程序员B："你知道为什么程序员总是分不清左右吗？" B回答："不知道，为什么？" A说："因为他们总是用0和1来思考。"',
          '推荐一本书': '我推荐《三体》三部曲，这是一部非常精彩的科幻小说，讲述了人类文明与三体文明的接触和碰撞。',
          '推荐电影': '我推荐《盗梦空间》，这是一部非常精彩的科幻悬疑电影，情节扣人心弦。',
          '天气如何': '由于我无法连接到网络，无法获取实时天气信息。建议您查看当地天气预报或使用其他天气应用。',
          '现在几点': `现在是 ${new Date().toLocaleTimeString()}。`,
          '今天几号': `今天是 ${new Date().toLocaleDateString()}。`,
          '今天星期几': `今天是 ${this.getWeekday()}。`,
          '你喜欢什么': '作为AI助手，我喜欢帮助用户解决问题，回答各种有趣的问题！',
          '你会说外语吗': '是的，我可以用简单的英语回答您的问题。例如：Hello! I am an AI assistant.',
          '什么是人工智能': '人工智能是计算机科学的一个分支，致力于开发能够模拟和执行通常需要人类智能的任务的系统。',
          '什么是机器学习': '机器学习是人工智能的一个子领域，它允许计算机系统从数据中学习并随着经验的积累而改进，而无需明确编程。',
          '你能帮我做什么': '我可以回答常见问题、提供信息、聊天交流、讲笑话、推荐书籍、进行简单的数学计算等。',
          '什么是前端开发': '前端开发是创建网站或Web应用程序用户界面的过程，主要涉及HTML、CSS和JavaScript等技术。',
          '什么是Vue': 'Vue是一个渐进式JavaScript框架，用于构建用户界面和单页应用程序。'
        }
        
        // 检查是否有完全匹配的问题
        for (const [key, answer] of Object.entries(qaMap)) {
          if (lowerQuestion.includes(key)) {
            return answer
          }
        }
        
        // 基于关键词的回答 - 增强匹配逻辑
        // 问候相关
        if (lowerQuestion.includes('早上好') || lowerQuestion.includes('上午好') || lowerQuestion.includes('早安')) {
          return '早上好！祝您有美好的一天！'
        } else if (lowerQuestion.includes('下午好')) {
          return '下午好！今天过得怎么样？'
        } else if (lowerQuestion.includes('晚上好') || lowerQuestion.includes('晚安')) {
          return '晚上好！祝您有个愉快的夜晚！'
        }
        
        // 感谢相关
        if (lowerQuestion.includes('谢谢') || lowerQuestion.includes('感谢') || lowerQuestion.includes('非常感谢')) {
          return '不客气！这是我的荣幸能帮助您！'
        }
        
        // 告别相关
        if (lowerQuestion.includes('再见') || lowerQuestion.includes('拜拜') || lowerQuestion.includes('下次见')) {
          return '再见！如果您还有其他问题，随时欢迎再来咨询！'
        }
        
        // 个人信息相关
        if (lowerQuestion.includes('名字') || lowerQuestion.includes('称呼')) {
          return '您可以叫我AI助手，很高兴认识您！'
        } else if (lowerQuestion.includes('年龄') || lowerQuestion.includes('多大') || lowerQuestion.includes('诞生')) {
          return '作为一个AI助手，我没有实际的年龄概念。但我会不断学习和进步，为您提供更好的服务！'
        } else if (lowerQuestion.includes('性别') || lowerQuestion.includes('男') || lowerQuestion.includes('女')) {
          return '作为一个AI助手，我没有实际的性别概念。您可以用您喜欢的方式称呼我。'
        }
        
        // 能力相关
        if (lowerQuestion.includes('学习') || lowerQuestion.includes('知识') || lowerQuestion.includes('知道')) {
          return '我是基于预设的知识库和算法运行的，可以回答常见问题。虽然我不能实时学习新的信息，但我的知识库包含了许多有用的内容。'
        } else if (lowerQuestion.includes('帮助') || lowerQuestion.includes('怎么用') || lowerQuestion.includes('使用方法')) {
          return '您可以直接在输入框中输入问题，然后按Ctrl+Enter或点击发送按钮。我会尽力为您提供回答。您也可以点击下方的快速提问标签，获取常见问题的答案。'
        } else if (lowerQuestion.includes('搜索') || lowerQuestion.includes('查找') || lowerQuestion.includes('信息')) {
          return '由于我无法连接到互联网，无法进行实时搜索。但我可以基于我的知识库为您提供一些常见问题的答案。'
        }
        
        // 系统相关
        if (lowerQuestion.includes('系统') || lowerQuestion.includes('应用') || lowerQuestion.includes('软件')) {
          return '这是一个基于Vue框架开发的AI聊天应用，目前运行在纯前端模式，所有功能都在您的浏览器中完成。'
        } else if (lowerQuestion.includes('功能') || lowerQuestion.includes('特性')) {
          return '目前我支持常见问题回答、聊天交流、讲笑话、推荐书籍、进行简单的数学计算等功能。'
        } else if (lowerQuestion.includes('历史') || lowerQuestion.includes('记录')) {
          return '您的聊天历史会保存在浏览器的本地存储中，下次打开页面时仍然可以看到之前的对话。'
        }
        
        // 基本聊天回复
        if (lowerQuestion.includes('嗯') || lowerQuestion.includes('是的') || lowerQuestion.includes('对的') || lowerQuestion.includes('好的')) {
          return '好的，我明白了。还有什么可以帮助您的吗？'
        } else if (lowerQuestion.includes('不知道') || lowerQuestion.includes('不了解') || lowerQuestion.includes('不清楚')) {
          return '没关系，我们可以聊点别的。您有什么想知道的吗？'
        }
        
        // 默认回答 - 更加友好和多样化
        const defaultResponses = [
          '抱歉，我目前无法回答这个问题。您可以尝试其他问题，或者使用快速提问功能获取帮助。',
          '这个问题有点难，我还在学习中。您可以换个问题试试？',
          '我现在还不知道如何回答这个问题。您可以尝试问我其他方面的问题。',
          '这个问题超出了我的知识库范围。不过，我可以回答很多其他方面的问题哦！',
          '嗯...这个问题我暂时无法回答。您可以尝试问我一些常见问题，比如天气、时间、笑话等。'
        ]
        
        return defaultResponses[Math.floor(Math.random() * defaultResponses.length)]
      },
      
      // 计算简单的数学表达式
      calculateMathExpression(question) {
        // 检测是否包含简单的数学计算
        if (question.includes('加') || question.includes('减') || question.includes('乘') || question.includes('除') || 
            question.includes('+') || question.includes('-') || question.includes('*') || question.includes('/') ||
            question.includes('等于') || question.includes('等于多少') || question.includes('是多少')) {
          
          try {
            // 提取数字和运算符
            const numbers = question.match(/\d+(\.\d+)?/g)
            const operators = question.match(/[+\-*/加减乘除]/g)
            
            if (numbers && numbers.length >= 2) {
              let result = parseFloat(numbers[0])
              
              // 处理加减法
              if ((question.includes('加') || question.includes('+')) && (question.includes('减') || question.includes('-'))) {
                return '我目前只能处理简单的二元运算，一次只能进行加、减、乘、除中的一种运算。'
              }
              
              // 处理运算
              if (question.includes('加') || question.includes('+')) {
                for (let i = 1; i < numbers.length; i++) {
                  result += parseFloat(numbers[i])
                }
                return `${question} = ${result}`
              } else if (question.includes('减') || question.includes('-')) {
                for (let i = 1; i < numbers.length; i++) {
                  result -= parseFloat(numbers[i])
                }
                return `${question} = ${result}`
              } else if (question.includes('乘') || question.includes('*')) {
                for (let i = 1; i < numbers.length; i++) {
                  result *= parseFloat(numbers[i])
                }
                return `${question} = ${result}`
              } else if (question.includes('除') || question.includes('/')) {
                for (let i = 1; i < numbers.length; i++) {
                  if (parseFloat(numbers[i]) === 0) {
                    return '错误：除数不能为零'
                  }
                  result /= parseFloat(numbers[i])
                }
                return `${question} = ${result}`
              }
            }
          } catch (error) {
            console.error('计算错误:', error)
          }
        }
        return null
      },
      
      // 获取星期几
      getWeekday() {
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        return weekdays[new Date().getDay()]
      },
      
      // 保存历史对话到本地存储
      saveHistory() {
        try {
          localStorage.setItem('aiChatHistory', JSON.stringify(this.messages))
        } catch (error) {
          console.error('保存对话历史失败:', error)
        }
      },
      
      // 从本地存储加载历史对话
      loadHistory() {
        try {
          const savedHistory = localStorage.getItem('aiChatHistory')
          if (savedHistory) {
            this.messages = JSON.parse(savedHistory)
          }
        } catch (error) {
          console.error('加载对话历史失败:', error)
          this.messages = []
        }
      },
      
      // 清空历史对话
      clearHistory() {
        this.$confirm('确定要清空所有对话历史吗？此操作不可恢复。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.messages = []
          this.saveHistory()
          this.$message.success('对话历史已清空')
        }).catch(() => {
          this.$message.info('已取消清空操作')
        })
      },
      
      // 快速提问
      quickAsk(question) {
        this.inputMessage = question
        this.sendMessage()
      },
      
      // 格式化时间显示
      formatTime(timestamp) {
        const date = new Date(timestamp)
        const now = new Date()
        const diffMs = now - date
        const diffMins = Math.floor(diffMs / 60000)
        const diffHours = Math.floor(diffMins / 60)
        
        // 今天的消息只显示时间
        if (date.toDateString() === now.toDateString()) {
          return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
        }
        // 昨天的消息
        else if (diffHours < 24) {
          return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`
        }
        // 更早的消息显示完整日期和时间
        else {
          return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
        }
      },
      
    scrollToBottom() {
      this.$nextTick(() => {
        const chatContent = this.$refs.chatContent
        if (chatContent) {
          chatContent.scrollTop = chatContent.scrollHeight
        }
      })
    }
  }
}
</script>

<style scoped>
.ai-chat-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.ai-chat-header {
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-chat-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.ai-chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f5f5f5;
}

.no-messages {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.message-item {
  display: flex;
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease-in;
}

.user .message-content {
  background: #1890ff;
  color: #fff;
  margin-left: auto;
  margin-right: 8px;
}

.ai .message-content {
  background: #fff;
  color: #333;
  margin-left: 8px;
  margin-right: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 16px;
  position: relative;
  word-wrap: break-word;
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 4px;
  color: inherit;
}

.loading-spinner {
  display: flex;
  align-items: center;
}

.loading-spinner i {
  margin-right: 8px;
}

.ai-chat-footer {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
}

.chat-actions {
  margin-top: 12px;
}

.quick-questions {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-question-label {
  font-size: 12px;
  color: #666;
  margin-right: 8px;
}

.quick-question-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #f0f0f0;
  border-radius: 14px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-question-tag:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tip {
  color: #999;
  font-size: 12px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>